<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="user-box flex w100">
		<view class="user-content ">
			<personCenterVue :userInfo="userInfo" :accountInfo="accountInfo" v-if="itemState==='user'"
				@changeItem="changeItem">
			</personCenterVue>
			<shopCenterVue ref="shopCenter" v-else-if="itemState==='shop'" @changeItem="changeItem"></shopCenterVue>
		</view>
		<tabbarContentVue :current="3"></tabbarContentVue>
	</view>
</template>

<script setup>
	import personCenterVue from '@/components/userCenter/personCenter.vue';
	import shopCenterVue from '@/components/userCenter/shopCenter.vue';
	import tabbarContentVue from '@/components/tabbarContent/tabbarContent.vue';
	import {
		userInfoStore
	} from '@/stores/user.js';
	const userStore = userInfoStore();
	const userInfo = ref(computed(() => userStore.userInfo));
	const itemState = ref('user');
	const shopCenter = ref(null);
	const accountInfo = ref(computed(() => userStore.accountInfo));
	onLoad(() => {
		// console.log('userStore', userInfo.value);
	})
	onShow(() => {
		let token = uni.getStorageSync('user_token') || null;
		// userInfo.value = userStore.userInfo;
		if (token && itemState.value) {
			userStore.getAccount();
		}
	});
	onPullDownRefresh(async () => { //下拉刷新
		if (itemState.value === 'user') { //个人中心
			await userStore.getUserInfo();
			await userStore.getAccount();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 800)
		} else if (itemState.value === 'shop') {
			shopCenter.value.pullDownRefresh();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 800)
		}
	})
	const changeItem = (type) => { //切换身份
		itemState.value = type
		if (type === 'shop') {
			uni.setNavigationBarTitle({
				title: '商家中心'
			});
		} else if (type === 'user') {
			uni.setNavigationBarTitle({
				title: '个人中心'
			});
		}
	}
</script>

<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between !important;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0 !important;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1 !important;
	}
</style>
<style lang="scss" scoped>
	.user-box {
		flex-direction: column;
		height: 100vh;
	}

	.user-content {
		flex: 1;
	}
</style>